<template>
  <div class="chart-container">
    <div class="chart-title">舆情走势</div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SentimentTrendLine',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', () => {
      this.chart && this.chart.resize()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['正面', '负面', '中性'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#fff' }
        },
        series: [
          {
            name: '正面',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: { color: '#91cc75' }
          },
          {
            name: '负面',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310],
            itemStyle: { color: '#ee6666' }
          },
          {
            name: '中性',
            type: 'line',
            data: [150, 232, 201, 154, 190, 330, 410],
            itemStyle: { color: '#5470c6' }
          }
        ]
      }
      
      this.chart.setOption(option)
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.chart.resize)
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .chart-title {
    font-size: 16px;
    margin-bottom: 10px;
    flex: 0 0 auto;
  }
  
  .chart {
    flex: 1;
    min-height: 0;
  }
}
</style> 